<template>
  <div class="tab">
    <div class="tab-main">
      <ul class="flex">
        <template v-for = "(item,index) in tabs">
          <li
            class = "flex-item"
            :class = '{ "tab-active":nowIndex==index }'
            @click = 'onTabClick(index)'
          >
            {{item}}
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        tabs:[
          "维保",
          "养护",
          "维修"
        ],
        nowIndex:0
      }
    },
    methods: {
      onTabClick(index) {
        this.nowIndex = index;
        this.$emit("onTabs",index);
      }
    }
  }
</script>
<style lang="less">
.tab{
  background: #EC681F;
  padding-top: 20px;
  padding-bottom: 20px;
  .tab-main{
    width: 80%;
    margin: 0 auto;
    ul{
      width:100%;
      li.tab-active{
        border:2px solid #fff;
        transition: all .3s ease-in-out;
      }
      li{
        height: 60px;
        line-height: 60px;
        width: 150px;
        border-radius: 8px;
        font-size: 28px;
        color:#fff;
        border:2px solid #EC681F;
        transition: all .3s ease-in-out;
      }
    }
  }
}
</style>
